﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null; ViewData["Title"] = "Gantt Chart";
}
<script src="~/lib/layui/layui.js"></script>
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-xs4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>工单编码:</b> </div>
                <input type="text" id="ProductionWorkOrdersNoSe" value="" placeholder="请输入工单编码" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>工单名称:</b> </div>
                <input type="text" id="ProductionWorkOrdersNameSe" placeholder="请输入工单名称" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>来源单据:</b> </div>
                <div class="layui-input-inline">
                    <input type="radio" lay-filter="demo-radio-filter" name="SourceSe" value="" title="全部" checked>
                    <input type="radio" lay-filter="demo-radio-filter" name="SourceSe" value="客户订单" title="客户订单">
                    <input type="radio" lay-filter="demo-radio-filter" name="SourceSe" value="库存备货" title="库存备货">
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>产品编号:</b> </div>
                <input type="text" id="ProductsNoSe" placeholder="请输入产品编号" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>产品名称:</b> </div>
                <input type="text" id="ProductsNameSe" placeholder="请输入产品名称" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>客户编码:</b> </div>
                <input type="text" id="ClientNoSe" placeholder="请输入客户编码" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>客户名称:</b> </div>
                <input type="text" id="ClientNameSe" placeholder="请输入客户名称" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>工单类型:</b> </div>
                <div class="layui-input-inline">
                    <select id="TicketsTypeSe" lay-filter="aihao">
                        <option value=""></option>
                        <option value="自产">自产</option>
                        <option value="外协">外协</option>
                        <option value="外购">外购</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-input-group">
                <div class="layui-input-prefix"><b>需求日期:</b> </div>
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" id="DemandDateSe" readonly placeholder="请选择需求日期" class="layui-input demo-table-search-date">
                </div>
            </div>
        </div>
        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">
                <span class="layui-badge-dot"></span>新增
            </button>
        </div>
    </form>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
        <script src="~/lib/chart/dhtmlxgantt.js"></script>
   <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style="width:100%; height:400px;"></div>

  
</body>
</html>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
        </div>
    </script>
    <table class="layui-hide" id="ID-table-demo-search" lay-filter="ID-table-demo-search"></table>
    <script type="text/html" id="toolDemo">
       <div class="layui-clear-space">
          <a onclick="Update()" lay-on="test-iframe-curs"  style="color:cornflowerblue">排产</a>
        </div>
    </script>
    <div id="demo-laypage-all"></div>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>
          var getid = 0;
        layui.use(function () {
          
            var $ = layui.$;
            var form = layui.form;
            var laydate = layui.laydate;
            var util = layui.util;
            var layer = layui.layer;
            var laypage = layui.laypage;
        var table = layui.table;
            $(function () {
                getTable(1, 2);
                // GanttChart();
                StashHtml();
            })

            function getTable(pageIndex, pageSize) {
                let dataObj = {
                    productionWorkOrdersNo: $("#ProductionWorkOrdersNoSe").val(),
                    productionWorkOrdersName: $("#ProductionWorkOrdersNameSe").val(),
                    source: $("[name='SourceSe']:checked").val(),
                    productsNo: $("#ProductsNoSe").val(),
                    productsName: $("#ProductsNameSe").val(),
                    clientNo: $("#ClientNoSe").val(),
                    clientName: $("#ClientNameSe").val(),
                    ticketsType: $("#TicketsTypeSe").val(),
                    demandDate: $("#DemandDateSe").val() || null,
                    pageIndex: pageIndex,
                    pageSize: pageSize
                }
                // 创建表格实例
                var inst = table.render({
                    elem: '#ID-table-demo-search',
                    method: 'POST',
                    contentType: 'application/json',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips',
                        onClick: function (obj) { // 2.9.12+
                            layer.alert('自定义工具栏图标按钮');
                        }
                    }],
                    url: '@ViewBag.FoundationRead' + '/api/WorkOrders/PageProductionList', // 此处为静态模拟数据，实际使用时需换成真实接口
                    where: dataObj,
                    cols: [[
                         { type: 'checkbox', title: '复选框', fixed: true }, // 单选框
                        { field: 'productionWorkOrdersNo', title: '工单编码', width: 120, sort: true, fixed: true },
                        { field: 'productionWorkOrdersName', title: '工单名称', width: 120 },
                        { field: 'ticketsType', title: '工单类型', width: 100 },
                        { field: 'source', title: '工单来源', width: 100 },
                        { field: 'orderNumber', title: '订单编号', width: 100 },
                        { field: 'productManageNode', title: '产品编号', width: 100 },
                        { field: 'productManageName', title: '产品名称', width: 100 },
                        { field: 'productManageNumber', title: '规格型号', width: 100 },
                        { field: 'unites', title: '单位', width: 80 },
                        { field: 'ticketsNum', title: '工单数量', width: 100 },
                        { field: 'adjustNum', title: '调整数量', width: 100 },
                        { field: 'proNum', title: '以生产数量', width: 100 },
                        { field: 'batchNo', title: '批次号', width: 100 },
                        { field: 'clientNo', title: '客户编码', width: 100 },
                        { field: 'clientName', title: '客户名称', width: 100 },
                        { field: 'demandDate', title: '需求日期', width: 100 },
                        { field: 'state', title: '单据状态', width: 100 },
                        { fixed: 'right', title: '操作', width: 120, minWidth: 120, templet: '#toolDemo' }
                    ]],
                    page: false,
                    height: 310,
                    done: function (res) {
                        var id = this.id;
                        console.log(res,'1111111111');// 你可以在这里检查返回的数据结构是否符合预期
                        // 触发单元格工具事件
                        //分页数据
                        laypage.render({
                            elem: 'demo-laypage-all', // 元素 id
                            count: res.totalCount, // 数据总数
                            curr: pageIndex,
                            limit: pageSize,
                            limits: [2, 3, 4],
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                            jump: function (obj, first) {
                                if (!first) {
                                    getTable(obj.curr, obj.limit);
                                }
                            }
                        });
                    }
                });
            }

        // 触发表格复选框选择
        table.on('checkbox(ID-table-demo-search)', function (obj) {
            getid = obj.data.productionWorkOrdersID
        });

     

              
            // 日期
            laydate.render({
                elem: '.demo-table-search-date'
            });
            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                getTable(1, 2);
                return false; // 阻止默认 form 跳转
            });
        });

        function Update() {
            var $ = layui.$;
            var table = layui.table
            var layer = layui.layer;
            var util = layui.util;
            // 事件
            util.on('lay-on', {
                'test-iframe-curs': function () {
                    layer.open({
                        type: 2,
                        title: '生产任务修改',
                        shadeClose: true,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1200px', '1000px'],
                        content: '/Document/ProductionTaskDisplay?id='+ getid
                    });
                }
            })
        }


  



    // Example data
    var task = [
        { id: 1, text: "Project #1", start_date: "01-04-2023", duration: 18, progress: 0.4 },
        { id: 2, text: "Task #1", start_date: "02-04-2023", duration: 8, progress: 0.6 },
        { id: 3, text: "Task #2", start_date: "11-04-2023", duration: 8, progress: 0.6 }
    ];
        
    function StashHtml() {
        gantt.config.xml_date = "%d-%m-%Y";
        gantt.init("gantt_here");
        var tasks = [{}]
        var dataObj = {
            productionWorkOrdersNo:"",
            productionWorkOrdersName:"",
            source:"",
            productsNo:"",
            productsName:"",
            clientNo:"",
            clientName:"",
            ticketsType:"",
            demandDate: null,
            pageIndex: 1,
            pageSize: 2
        }

        $.ajax({

            url: '@ViewBag.FoundationRead' + '/api/WorkOrders/PageProductionList',
            data: JSON.stringify(dataObj),
            type: "post",
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res.data, '1111');
                console.log(res.data[0].demandDate)
               for (var i = 0; i < res.data.length; i++) {
                    console.log(res.data[i].demandDate);
                    tasks.push({
                        id:res.data[i].productionWorkOrdersID,
                        text: res.data[i].productManageName,
                        start_date: new Date(res.data[i].demandDate.substr(0,10)),
                        // start_date: new Date("2024-05-03"),
                        duration: "8",
                        progress: 0.6
                    })
                }
                console.log(tasks,'1111');
                gantt.parse({ data:tasks});
            }

        })

    }
    

 
   
    </script>

</body>
</html>